button.btn {
    text-decoration: none;
}

.btn.rounded-circle {
    width: 2em;
    height: 2em;
    display: flex;
    padding: 0;
    text-decoration: none;
    text-align: center;
    align-items: center;
    justify-content: center;
}

    .btn.rounded-circle i {
        margin: 0 !important;
    }

.btn-link.primary,
.btn-primary {
    color: white;
    background-color: var(--color-primary);
    border-color: transparent;
    /*  width:1.5em;
    height:1.5em;
    line-height:1.5em;
    padding:0;*/
}

.btn[disabled]{
color: lightgray;
}

.btn.btn-primary[disabled] ,
    .btn-primary.disabled, 
    .btn-primary:disabled {
        opacity: 0.5;
        background-color: var(--color-primary);
        border: none;
    }

   

.btn-secondary {
    color: #fff;
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-link {
    /* text-decoration: none; */
    color: var(--color-link);
}


    .btn-link > i {
        margin-left: 5px;
        font-size: 15px;
    }

.btn i + * {
    margin-right: 5px;
}

[dir="ltr"] .btn-icon i + * {
    margin-left: 0.5rem;
    margin-right: 0;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

    .btn-outline-primary:disabled, .btn-outline-primary.disabled {
        color: gray !important;
        background: lightgray;
        border-color: lightgray;
    }

.btn-outline-secondary {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-outline-gray {
    border: 1px solid #ced4da;
    color: #414141;
}

.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle,
.btn:hover:not([disabled]) {
    background: var(--color-primary-dark);
    color: white !important;
    border-color: var(--color-primary-dark) !important;
}

.btn-group > button {
    margin: 0;
}

.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
    box-shadow: none;
}

.badge {
    font-size: 9px;
}

.btn .badge {
    position: absolute;
    bottom: .8rem;
    right: .8rem;
    padding: 2px 4px;
    text-align: center;
    top: unset;
    font-weight: normal;
}


button.selected:not(:hover) {
    background: var(--color-primary);
    color: white !important;
    border-color: var(--color-primary);
}

/*all classes that start with 'btn-group-icon' */
[class^="btn-group-icon"].btn-group button {
    border-radius: 0.2rem !important;
    color: var(--color-accent);
    border-color: #c5c5ff;
    font-size: 1rem !important;
}


    [class^="btn-group-icon"].btn-group button.selected:not(:hover) .weight-bars div {
        background: var(--color-primary) !important;
    }


/* button with icon and text- verical*/
.btn-group.btn-group-icon {
    /* margin-right: 0.9rem; */
    gap: .5rem;
    width: 100%;
}

    .btn-group.btn-group-icon button {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0.7rem 1rem;
        gap: .3rem;
        max-width: 8rem;
    }

/* button with icon, then text with desc*/
.btn-group-icon-text {
    flex-direction: column;
    gap: .5rem;
    width: 100%;
}

.btn-group.btn-group-icon-text button {
    display: flex;
    gap: .5rem;
    flex-direction: row;
    align-items: center;
    padding: .75rem;
}

    /*Icon*/
    .btn-group.btn-group-icon-text button > *:first-child {
        flex: 0 0 1.4rem;
    }
    /*Text*/
    .btn-group.btn-group-icon-text button div:last-child {
        text-align: right;
        line-height: 1;
    }

    .btn-group.btn-group-icon-text button div span {
        /* font-size: 18px !important; */
    }

    .btn-group.btn-group-icon-text button div p {
        margin-top: 3px;
        font-size: 15px !important;
        line-height: 1.1;
        margin-bottom: 0;
    }

    .btn-group.btn-group-icon-text button:not(.selected):not(:hover) div p {
        color: #888888;
    }


@media only screen and (max-width: 667px) {
    .btn-group.btn-group-icon button {
        padding: 0.7rem 5px;
        line-height: 1;
        gap: .5rem;
    }

        .btn-group.btn-group-icon button span {
            font-size: 16px;
        }
}